{% load ordering %}

<div id="story_right">
    <div id="story_by">
        <div class="user_avatar">
            <a href="{{ item.created_by.get_absolute_url }}">
                {% if item.created_by.avatar %}
                    <img id="avatar" src="{{ item.created_by.avatar.url }}">
                {% else %}
                    <img id="avatar" src="{{ STATIC_URL }}/images/default.jpg">
                {% endif %}
            </a>
        </div>
        <div id="story_item_username">
            <div>
                <a href="{{ item.created_by.get_absolute_url }}">
                    {{ item.created_by.get_username }}
                </a>
            </div>
            {% if item.created_by != user %}
                <div class="follow">
                    {% if user.is_authenticated %}
                        <a class="follow_link left" id="follow_link_{{ item.id }}"
                           href="#follow_user{{ item.id }}">
                            {%  with is_following=user|args:item.created_by|call:"is_following"  %}
                                {% if is_following %}
                                    You follow {{ item.created_by }}
                                {% else %}
                                    Follow {{ item.created_by }}
                                {% endif %}
                            {% endwith %}
                        </a>
                    {%  endif %}
                </div>
                {% if user.is_authenticated %}
                    {% include "follow_popup.html" with follow_user=item.created_by %}
                {% endif %}
            {% endif %}
        </div>
    </div>
    <ul>
{% comment %}
	<li>
		<div class="my_items_info">
                <strong>{{ item.created_by.live_minutes_week }}</strong> Live minutes /<span>this week</span>
            </div>
            <div class="my_items_info">
                <a href="{% url my_items_root item.created_by %}">
                    <strong>{{ item.created_by.live_current }}</strong> Live broadcasts /<span>now</span>
                </a>
            </div>
        </li>
{% endcomment %}
        <li>
            Item is live for <strong>{{ item.get_time_of_life }}</strong> minutes
        </li>
        <li>In
            {% if chapter %}
                <a href="{% url live_filter chapter item.category.id 0 'all' %}">
            {% else %}
                <a href="{% url live_filter 'popular' item.category.id 0 'all' %}">
            {% endif %}
            {{ item.category|capfirst }}
            </a>
        </li>
        <li>
            <div>Users Who Responded</div>
            <div id="responded_users">
                {% for response_user in item.responded_users %}
                    {% if forloop.first %}<div class="row">{% endif %}
                    <div class="table_avatar">
                        <a href="{{ response_user.get_absolute_url }}">
                            {% if response_user.avatar %}
                                <img src="{{ response_user.avatar.url }}">
                            {% else %}
                                <img src="{{ STATIC_URL }}/images/default.jpg">
                            {% endif %}
                        </a>
                    </div>
                    {% if forloop.counter|divisibleby:"4" %}
                        </div>
                        {% if forloop.revcounter != 1 %}
                            <div class="row">
                        {% endif %}
                    {% endif %}
                    {% if forloop.last and not forloop.counter|divisibleby:"4" %}</div>{% endif %}
                {% endfor %}
            </div>
        </li>
        <li>
            {% if user.is_authenticated %}
                {% if user in item.question %}
                    <span id="in_question">You questioned this</span>
                {% else %}
                    <form class="question_form" id="question_form{{ item.id }}"
                          method="POST" action="/item/question/">
                        {% csrf_token %}
                        <input type="hidden" name="item" value="{{ item.id }}">
                        <input type="submit" id="in_question" class="button_as_link gray"
                               value="In Question?">
                    </form>
                {% endif %}
            {% endif %}
        </li>
    </ul>
</div>

{% if related_items %}
    <div id="related-stories">
        <div id="related_header">Related News</div>
        <div id="related-stories-list">
        {% for related_item in related_items %}
            <div class="related_stories_container">
                <div class="relative_item_image">
                    {% if chapter %}
                        <a href="{% url item_filter chapter related_item.slug %}">
                    {% else %}
                        <a href="{{ related_item.get_absolute_url }}">
                    {% endif %}
                    {% with image=related_item.get_small_image %}
                        {% if image %}
                            <img src="{{ image }}"/>
                        {% else %}
                            <img src="{{ STATIC_URL }}images/no-image-Square.png"/>
                        {% endif %}
                    {% endwith %}
                    {% if not related_item.slumped %}
                        <span class="item_status" title="Live"></span>
                    {% endif %}
                    </a>
                </div>
            	<div class="relative_item_message">
                    <div class="relative_message">
                        {% if chapter %}
                            <a href="{% url item_filter chapter related_item.slug %}">{{ related_item.message }}</a>
                        {% else %}
                            <a href="{{ related_item.get_absolute_url }}">{{ related_item.message }}</a>
                        {% endif %}
                        <span class="item_user">{{ related_item.location.name }}</span>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
        <div id="related_footer"></div>
    </div>
{% endif %}